/**
 * Created by seeker910 on 13-12-31.
 */
/*
 layouter 所用到的数据全部来自对象本身属性，不是dom对象数据。
 * */
Rsd.define("Rsd.common.Layouter", {
    extend:'Rsd.common.Object',
    singleton:true,
    xtype: 'layouter',
    constructor: function Layouter () {

    },
    /**
     * @description 处理 dom对象
     * @description 设置位置相关属性：width、height、margin...以及自定义style，display=none 不参与布局
     * */
    layout: function layout(obj) {

        //监控 layout 执行次数
        //console.trace('in layouter',obj.id,obj.width);

        if (Rsd.isCreated(obj) == false) {
            return;
        }

        if (obj.isHidden()) {
            return;
        }

        if (obj.dom == null) {
            return;
        }
        var _sizeUnit = obj.sizeUnit||'px';
        //sytle样式 在属性中控制 布局后的 样式发生改变
        var _element = obj.style.element;
        if(obj.style.element)
        {
            delete obj.style.element;
        }
        
        obj.setElStyle(_element||obj.dom,obj.style,_sizeUnit);
        if(_element)
        {
            obj.style.element = _element;
        }

        //设置 高度 宽度 属性，单独控制
        var _domStyle = {};
        if (!Rsd.isUndefined(obj.width)) {
            _domStyle.width = obj.width;
        }

        if (!Rsd.isUndefined(obj.height) ) {
            _domStyle.height = obj.height;
        }
        if (!Rsd.isUndefined(obj.flex) ) {
            _domStyle.flex = obj.flex;
        }
        obj.setElStyle(obj.dom,_domStyle,_sizeUnit);

        var _names = ['top', 'right', 'bottom', 'left'];
        var _margin = obj.margin;
        obj.margin ={ top: 0, right: 0, bottom: 0, left: 0 };

        if (_margin) {

            var _ms;
            if (Rsd.getType(_margin) == '[object String]') {
                _ms = _margin.split(' ');
                 
                for (var i in _ms) {
                    if ( Rsd.isNumber(Number(_ms[i]))) {
                        obj.margin[_names[i]] = _ms[i] + _sizeUnit;
                    }
                    else {
                        obj.margin[_names[i]] = _ms[i];
                    }
                }
            }
            if (Rsd.getType(_margin) == '[object Array]') {
                _ms = _margin;

                for (var i in _ms) {
                    if ( Rsd.isNumber(Number(_ms[i]))) {
                        obj.margin[_names[i]] = _ms[i] + _sizeUnit;
                    }
                    else {
                        obj.margin[_names[i]] = _ms[i];
                    }
                }
            }
            if (Rsd.getType(_margin) == '[object Object]') {
                _ms = _margin;
                for (var i in _ms) {
                    if (Rsd.isNumber(Number(_ms[i]))) {
                        obj.margin[i] = _ms[i] + _sizeUnit;
                    }
                    else {
                        obj.margin[i] = _ms[i];
                    }
                }
            }
        }

        obj.dom.style.marginTop = obj.margin.top;
        obj.dom.style.marginRight = obj.margin.right;
        obj.dom.style.marginBottom = obj.margin.bottom;
        obj.dom.style.marginLeft = obj.margin.left;

        //debugger;
        var me = this;  
        //setTimeout(function () {
            me.layoutContent(obj.header || obj.label, obj.body || obj.ctrl,obj.sizeUnit); 
        //},0);

    },
    /**
     *  
     *  @description 布局子控件 ，layoutBorder,layoutVbox,layoutHbox,layoutFit,layoutAuto
     *  @description 布局方式
     *      vbox:弹性布局 一列多行布局
     *      hbox:弹性布局 一行多列布局
     *      fit:容器大小不变，子元素自适应缩放布局
     *      border:靠边框布局
     *      auto:容器大小自动应布局，子元素大小不变
     * */
    layoutItems:function layoutItems(obj){
        //debugger;
        if (obj.items && Rsd.getType(obj.items) == '[object Array]' && obj.items.length > 0) {

            switch (obj.layout.type.toLowerCase()) {
                case 'border':
                    this.layoutBorder(obj);
                    break;
                case 'vbox':
                    this.layoutVbox(obj);
                    break;
                case 'hbox':
                    this.layoutHbox(obj);
                    break;
                case 'fit':
                    this.layoutFit(obj);
                    break;
                    case 'auto':
                    this.layoutAuto(obj);
                    break;
                case 'none':
                    //不设定 有style控制
                    break;
                default:
                    throw new Error('Object id\'s [' + obj.id+ '] layout value is unknown value [' + obj.layout.type + '] in class ' + obj.$className + '.');
                    break;
            }

        }
    },
    /**
     * 靠边框布局:以上下左右为起点布局控件
     * 容器：高度和宽度固定
     * 子控件：高度固定，宽度固定 
     * region:top,bottom,left,right,center
     * */
    layoutBorder:function layoutBorder(obj){
        //debugger;
        if(obj.layout.type != 'border')
        {
            return;
        }
        obj.addCls('body','x-layout-border');
        var _item;
        var _i_margins = [0, 0, 0, 0];
        var _sizeUnit = obj.sizeUnit||'px';
        for (var i=0; i< obj.items.length ;i++) {
            _item = obj.items[i]; 
            if(!_item)
            {
                throw new Error('items['+i+'] is null in object '+ obj.id + '.');
            }
            if(!Rsd.isObject(_item))
            {
                throw new Error('items['+i+'] is not a object in object '+ obj.id + '.');
            }
            if(!(_item instanceof  Rsd.common.ComponentX))
            {
                continue;
            }
            if(_item.floating || _item.fixed)
            {
                continue;
            }

            switch (_item.region) {
                case 'top':
                case 'north':
                    _item.addCls('dom','x-layout-border-north');
                    var _position = {};
                    _position.top = _i_margins[0] + _sizeUnit;
                    _position.right = _i_margins[1] + _sizeUnit;
                    _position.bottom = null;
                    _position.left = _i_margins[3] + _sizeUnit;
                    _item.setPosition(_position);
                    if (!_item.height) {
                        continue;
                    }

                    if (typeof (_item.height) == 'string' && parseInt(_item.height)) {
                        _i_margins[0] += parseInt(_item.height);
                    }else
                    {
                        _i_margins[0] += _item.height;
                    }
                    break;
                case 'right':
                case 'east':
                    _item.addCls('dom','x-layout-border-east');
                    var _position = {};
                    _position.top = _i_margins[0] + _sizeUnit;
                    _position.right = _i_margins[1] + _sizeUnit;
                    _position.bottom = _i_margins[2] + _sizeUnit;
                    _position.left = null;
                    _item.setPosition(_position);
                    if (!_item.width) {
                        continue;
                    }

                    if (typeof (_item.width) == 'string' && parseInt(_item.width)) {
                        _i_margins[1] += parseInt(_item.width);
                    }else {
                        _i_margins[1] += _item.width;
                    }

                    break;
                case 'bottom':
                case 'south':
                    _item.addCls('dom','x-layout-border-south');
                    var _position = {};
                    _position.top = null;
                    _position.right = _i_margins[1] + _sizeUnit;
                    _position.bottom = _i_margins[2] + _sizeUnit;
                    _position.left = _i_margins[3] + _sizeUnit;
                    _item.setPosition(_position);
                    if (!_item.height) {
                        continue;
                    }

                    if (typeof (_item.height) == 'string' && parseInt(_item.height))
                     {
                        _i_margins[2] +=  parseInt(_item.height);
                    }
                    else 
                    {
                        _i_margins[2] += _item.height;
                    }

                    break;
                case 'left':
                case 'west':
                    _item.addCls('dom','x-layout-border-west');
                    var _position = {};
                    _position.top = _i_margins[0]+ _sizeUnit;
                    _position.right = null;
                    _position.bottom = _i_margins[2]+ _sizeUnit;
                    _position.left = _i_margins[3]+ _sizeUnit;
                    _item.setPosition(_position);
                    if (!_item.width) {
                        continue;
                    }

                    if (typeof (_item.width) == 'string' && parseInt(_item.width)) {
                        _i_margins[3] += parseInt(_item.width);
                    }
                    else
                    {
                        _i_margins[3] += _item.width;
                    }

                    break;
                case 'center':
                    _item.width = 'auto';
                    _item.height = 'auto';
                    break;
                default:
                    throw new Error('Property region(top/north,right/east,bottom/south,left/west,center) of component['+ _item.$className +'] is unknown value ['+_item.region+'] in '+ obj.$className +'.');
                    break;
            }


        }

        for (var i=0; i< obj.items.length ;i++) {
            _item = obj.items[i];
            if(!(_item instanceof  Rsd.common.ComponentX))
            {
                continue;
            }
            if(_item.floating || _item.fixed)
            {
                continue;
            }
            switch (_item.region) {
                case 'center':
                    _item.width = null;
                    _item.height = null;
                    _item.addCls('dom','x-layout-border-center');
                    var _position = {};
                    _position.top = _i_margins[0] + _sizeUnit;
                    _position.right = _i_margins[1] + _sizeUnit;
                    _position.bottom = _i_margins[2] + _sizeUnit;
                    _position.left = _i_margins[3] + _sizeUnit;

                    _item.setPosition(_position);

                    if(_i_margins[0]==0 && _i_margins[2]==0)
                    {
                        //_item.height = '100%';
                    }

                    if(_i_margins[1]==0 && _i_margins[3]==0) {

                        //_item.width = '100%';
                    }
                    break;
                default:
                    break;
            }
        }

    },
    /**
     * 弹性布局：单列多行
     * 容器：高度自动，宽度固定 
     * 子控件：高度和宽度固定，
     * display:flex ,flex-direction:column; 垂直方向多行布局
     * */
    layoutVbox:function layoutVbox(obj){

        if(obj.layout.type != 'vbox')
        {
            return;
        }
        obj.addCls('body','x-layout-vbox');
        //原始：start,center,end,stretch，扩展：top，right,left,bottom
        switch (obj.layout.align)
        {
            //原始    
            case 'start':
            case 'center': 
            case 'end':
            case 'stretch':
                obj.addCls('body','x-layout-flex-align-items-'+obj.layout.align);
                 break; 
            //扩展
            case 'left':
                obj.addCls('body','x-layout-vbox-left');
                break;
            case 'right':
                obj.addCls('body','x-layout-vbox-right');
                break;
            case 'top':
                obj.addCls('body','x-layout-vbox-top');
                break;
            case 'bottom':
                obj.addCls('body','x-layout-vbox-bottom');
                break;
            case 'center':
                obj.addCls('body','x-layout-vbox-center');
                break; 
            default :
                throw new Error('Property align of layout is unknown value ['+_item.align || obj.layout.align+'].');
                break;
        }
        if(obj.layout.wrap==true || obj.layout.wrap == 'wrap')
        {
             obj.addCls('body','x-layout-flex-wrap');
        }
        if(obj.layout.wrap==false || obj.layout.wrap == 'nowrap')
        {
             obj.addCls('body','x-layout-flex-nowrap');
        }
        //整体 在主轴和 交交叉轴上的对齐方式
        if(obj.layout.content)
        {
            var arr = obj.layout.content.split(' ');
            obj.addCls('body','x-layout-flex-align-content-' + arr[0]);
            obj.addCls('body','x-layout-flex-justify-content-' + (arr.length>1?arr[1]:arr[0]));
        }
    },
    /**
     * 弹性布局：单行多列
     * 容器：高度和宽度固定，
     * 子控件：高度固定，宽度不固定 
     * display:flex ,flex-direction:row; 水平方向多列布局
     * */
    layoutHbox:function layoutHbox(obj){
        if(obj.layout.type != 'hbox')
        {
            return;
        }
        obj.addCls('body','x-layout-hbox');
        //原始：start,center,end,stretch，扩展：top，right,left,bottom
        switch (obj.layout.align)
        {
                 //原始    
                case 'start':
                case 'center': 
                case 'end':
                case 'stretch':
                    obj.addCls('body','x-layout-flex-align-items-'+obj.layout.align);
                    break; 
                //扩展
                case 'left':
                    obj.addCls('body','x-layout-hbox-left');
                    break;
                case 'right':
                    obj.addCls('body','x-layout-hbox-right');
                    break;
                case  'top':
                    obj.addCls('body','x-layout-hbox-top');
                    break;
                case 'bottom':
                    obj.addCls('body','x-layout-hbox-bottom');
                    break;
                case 'center':
                    obj.addCls('body','x-layout-hbox-center');
                    break; 
                default :
                    throw new Error('Property align(left,right,top,bottom,center) of layout is unknown value ['+_item.align || obj.layout.align+'].');
                    break;
        }
        if(obj.layout.wrap==true || obj.layout.wrap == 'wrap')
        {
             obj.addCls('body','x-layout-flex-wrap');
        }
        if(obj.layout.wrap==false || obj.layout.wrap == 'nowrap')
        {
             obj.addCls('body','x-layout-flex-nowrap');
        }
        //整体 在主轴和 交交叉轴上的对齐方式
        if(obj.layout.content)
        {
            var arr = obj.layout.content.split(' ');
            obj.addCls('body','x-layout-flex-align-content-' + arr[0]);
            obj.addCls('body','x-layout-flex-justify-content-' + (arr.length>1?arr[1]:arr[0]));
        }
    },
    /***
     * 弹性-自适应布局：容器大小不变；子控件随容器大小变化而变化。
     * 如果只有一个子控件，子控件填满整个父控件，
     * 如果有多个控件，所有子控件自适应
     */
    layoutFit:function layoutFit(obj)
    {
        if(obj.layout.type != 'fit')
        {
            return;
        } 
        obj.addCls('body','x-layout-fit');
        
        var _align = obj.layout.align;
        var  _item; 
        for (var i=0; i< obj.items.length ;i++) {
            _item = obj.items[i];
            if(_item.floating || _item.fixed)
            {
                continue;
            } 
            //原始：start,center,end,stretch，扩展：top，right,left,bottom
            switch (_align)
            {
                //原始    
                case 'start':
                case 'center': 
                case 'end':
                case 'stretch':
                    obj.addCls('body','x-layout-flex-align-items-'+obj.layout.align);
                 break; 
                //扩展
                case 'center':
                    _item.addCls('dom','x-layout-fit-center');
                    break;
                case 'left':
                    _item.addCls('dom','x-layout-fit-left');
                    break;
                case 'right':
                    _item.addCls('dom','x-layout-fit-right');
                    break;
                case  'top':
                    _item.addCls('dom','x-layout-fit-top');
                    break;
                case  'bottom':
                    _item.addCls('dom','x-layout-fit-bottom');
                    break; 
                default :
                    throw new Error('Property align of layout is unknown value ['+_align+'].');
                    break;
            }  
        } 
        
        if(obj.layout.wrap==true || obj.layout.wrap == 'wrap')
        {
             obj.addCls('body','x-layout-flex-wrap');
        }
        if(obj.layout.wrap==false || obj.layout.wrap == 'nowrap')
        {
             obj.addCls('body','x-layout-flex-nowrap');
        }
        //整体 在主轴和 交交叉轴上的对齐方式
        if (obj.layout.content) {
            var arr = obj.layout.content.split(' ');
            obj.addCls('body', 'x-layout-flex-align-content-' + arr[0]);
            obj.addCls('body', 'x-layout-flex-justify-content-' + (arr.length > 1 ? arr[1] : arr[0]));
        }
    },
    /** 
     * 流式布局：多行多列  
     * 容器：高度和宽度根据子元素自动变化，
     * 子控件：高度，宽度不变
     * 
     * */
    layoutAuto:function layoutAuto(obj){
        if(obj.layout.type != 'auto')
        {
            return;
        } 
        obj.addCls('body','x-layout-auto');
        
        var _align = obj.layout.align;
        var  _item;
        for (var i=0; i< obj.items.length ;i++) {
            _item = obj.items[i];
            if(_item.floating || _item.fixed)
            {
                continue;
            }
           
            switch (_align)
            {
                case 'center':
                    _item.addCls('dom','x-layout-auto-center');
                    break;
                case 'left':
                    _item.addCls('dom','x-layout-auto-left');
                    break;
                case 'right':
                    _item.addCls('dom','x-layout-auto-right');
                    break;
                case  'top':
                    _item.addCls('dom','x-layout-auto-top');
                    break;
                case  'bottom':
                    _item.addCls('dom','x-layout-auto-bottom');
                    break;
                default :
                    throw new Error('Property align of layout is unknown value ['+_align+'].');
                    break;
            } 
        }
    },

    /** 
     * @description 布局 header(label),body(ctrl)
     * */ 
    layoutContent: function layoutContent(header,body,sizeUnit) {

         
        var _h_element = header && header.element;
        var _body_element = body && body.element;
    
        var _position = header && header.position||'top';
        var _space =  parseInt(header && header.space)||0;

        var _sizeUnit = sizeUnit||'px';
        //在存在 label 或 header 时 ，设置body ,ctrl 样式
        if(_body_element && _h_element)
        {
            _body_element.style.flexGrow = 1;
            _body_element.style.flexShrink = 1;
            _body_element.style.flexBasis ='0%';
                
            //调整间隔
            switch (_position.toLowerCase()) {
                case 'top':
                    {
                        //_body_element.style.alignSelf = 'center';
                        _body_element.style.marginTop =  _space + 'px' ;
                    } 
                    break;
                case 'bottom':
                    {
                        //_body_element.style.alignSelf = 'center';
                        _body_element.style.marginBottom =  _space + 'px' ;
                    } 
                    break;
                case 'left':
                    { 
                        _body_element.style.alignSelf = 'center';
                        _body_element.style.marginLeft =  _space+ 'px';
                    }
                        break;
                case 'right':
                    {
                        _body_element.style.alignSelf = 'center';
                        _body_element.style.marginRight =  _space + 'px' ;
                    }
                    break
                default:
                    throw new Error('Property position of header or label is unknown value ['+header.position+'].');
                     
            }
            
        } 
        //设置  label 或 header 样式
        if (_h_element) {
 
            switch (_position.toLowerCase()) {
                case 'top':
                    {
                        _h_element.style.width = '100%';
                        _h_element.style.textAlign = header.align || 'center';
                        var _h = Rsd.isNumber(Number(header.height))?(header.height + _sizeUnit):header.height;
                        _h_element.style.height = header.height == null ? 'auto' :_h; 
                    } 
                    break;
                case 'bottom':
                    {
                        _h_element.style.width = '100%'; 
                        _h_element.style.textAlign = header.align || 'center';
                        var _h = Rsd.isNumber(Number(header.height))?(header.height + _sizeUnit):header.height;
                        _h_element.style.height = header.height == null ? 'auto' :_h; 
                    } 
                    break;
                case 'left':
                    { 
                        _h_element.style.textAlign = header.align || 'right';
                        _h_element.style.height = header.height||'100%';
                        _h_element.style.width = header.width == null ? 'auto' : ( Rsd.isNumber(Number(header.width)) ? ( header.width + _sizeUnit):header.width); 
                    }
                    break;
                case 'right':
                    {
                        //debugger; 
                        _h_element.style.textAlign = header.align || 'left';  
                        _h_element.style.height = header.height||'100%';
                        _h_element.style.width = header.width == null ? 'auto' : (Rsd.isNumber(Number(header.width)) ? ( header.width + _sizeUnit):header.width); 
                    }
                    break
                default:
                    throw new Error('Property position of header or label is unknown value ['+header.position+'].');
                    break;
            }

            //行高处理
            if(header.lineHeight)
            { 
                _h_element.style.lineHeight = header.lineHeight  + _sizeUnit;
            }
            else
            { 
                _h_element.style.lineHeight = _h_element.clientHeight?(_h_element.clientHeight + _sizeUnit):'unset';
            }
            
            var _h_style =  header.style || {}; 
            Rsd.setElStyle(_h_element,_h_style,_sizeUnit);
            
            if(header.content instanceof  Rsd.common.ComponentX)
            {
                header.content.doLayout(); 
            }
        }

        if(body && body.style)
        {
            Rsd.setElStyle(_body_element,body.style,_sizeUnit);
        }
       

    }
});
